<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 560px;
            height: 312px;
            background-color: rgb(249, 247, 248);
            border: 1px solid rgb(222, 222, 222);
            margin-left: 10px;
            margin-top: 10px;
        }

        .left {
            width: 456px;
            float: left;
        }

        .left img {
            width: 440px;
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right {
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right img {
            width: 95px;
            height: 62px;
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"><img src="images/1.jpg" /></div>
        <div class="right">
            <img src="images/1.jpg">
            <img src="images/2.jpg">
            <img src="images/3.jpg">
            <img src="images/4.jpg">
        </div>
    </div>
</body>
<script>
    // 1、自动切换 图片
    var bannerDom = document.querySelectorAll(".right>img");
    var leftDom = document.querySelector(".left>img")
    var timer;
    var index = 0;

    function play() {
        timer = setInterval(function () {
            index++;
            if (index > 3) {
                index = 0;
            }
            // 左边图片地址
            leftDom.src = bannerDom[index].src;

            // 控制透明度  除了当前显示的图片透明度为1 其他的都是0.5
            bannerDom.forEach(function (item) {
                item.style.opacity = 0.5;
            })
            bannerDom[index].style.opacity = 1

        }, 1000)
    }
    play()
    // 2、鼠标移入右侧的图片 左边切换到对应的图片  鼠标移出  以当前的图片为起点， 自动继续切换图片
    bannerDom.forEach(function (item, i) {
        item.addEventListener("mouseover", function () {
            // 清除定时器
            clearInterval(timer)
            // 设置左侧显示的是当前图片
            leftDom.src = this.src;
            // 修改index的记录值
            index = i;
            // 修改透明度
            // 3、当前显示的小图片 透明度为1  其他没有显示的保证透明度为0.5
            bannerDom.forEach(function (item) {
                item.style.opacity = 0.5;
            })
            bannerDom[index].style.opacity = 1
        })
        item.addEventListener('mouseout', play)
    })
</script>